<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="PRIDE is a Personal Portfolio Template">
        <meta name="keywords" content="perfect_coders, resume, cv, portfolio, personal, developer, designer,personal resume, onepage, clean, modern">
        <meta name="author" content="Mahamudul Hasan">

        <title>个人站</title>
        
        
        <!--==== bootstrap ====-->
        <link href="css/bootstrap.min.css" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/css/bootstrap.min.css" rel="stylesheet">
        <!--==== font-awesome ====-->
        <link href="css/font-awesome.min.css" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/css/font-awesome.min.css" rel="stylesheet">
        <!--==== owl-carousel ====-->
        <link href="css/owl.carousel.css" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/css/owl.carousel.css" rel="stylesheet">
        <!--==== magnific-popup ====-->
        <link href="css/magnific-popup.css" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/css/magnific-popup.css" rel="stylesheet">
        <!--==== animate css ====-->
        <link href="css/animate.min.css" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/css/animate.min.css" rel="stylesheet">
        
        <!--==== style css ====-->
        <link href="css/style.css" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/css/style.css" rel="stylesheet">
        <!--==== responsive css ====-->
        <link href="css/responsive.css" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/css/responsive.css" rel="stylesheet">
        
        <!--==== jquery ====-->
        <script src="js/jquery-2.1.4.min.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/jquery-2.1.4.min.js"></script>


        <!--[if lt IE 9]>
        <script src="js/html5shiv/3.7.2/html5shiv.min.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="js/respond/1.4.2/respond.min.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

       <!--==== DEMO COLOR PANEL =====-->
     <!--  <div class="demo_panel_box">
          <div class="color_panel_box">
             <div class="spiner_button slide_in_out"><i class="fa fa-cog fa-spin"></i></div>
              <span class="red_color"></span>
              <span class="blue_color"></span>
              <span class="yellow_color"></span>
              <span class="purple_color"></span>
              <span class="pink_color"></span>
              <span class="green_color"></span>
          </div>
      </div> -->
      <!--==== DEMO COLOR PANEL ===-->
      
     
       <!--===== Preloader ====-->
        <div class="preloader">
            <div class="spinner">
              <div class="double-bounce1"></div>
              <div class="double-bounce2"></div>
            </div>
        </div>

    
         <!--=====****************** INTRO SECTION ****************************=====-->
        <div id="home" class="intro-section">
        
         <!--===== HEADER AREA =====-->
            <header class="navbar custom-navbar">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-3 col-xs-12">
                            <div class="logo">
                               <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>
                                <a href="#home">陈建华</a> <!--== logo ==-->
                            </div>
                        </div>
                        
                        <div class="col-md-9 col-sm-9 col-xs-12">
                           <nav class="main-menu">
                            <div class="navbar-collapse collapse">
                                <ul class="nav navbar-nav"> <!--== manin menu ==-->
                                    <li class="active smooth-scroll"><a class="theme-color" href="#home">首页</a></li>
                                    <li class="smooth-scroll"><a class="theme-color" href="#about">关于我</a></li>
                                    <li class="smooth-scroll"><a class="theme-color" href="#services">个人技术</a></li>
                                    <li class="smooth-scroll"><a class="theme-color" href="#portfolio">作品</a></li>
                                    <li class="smooth-scroll"><a class="theme-color" href="#contact">联系我</a></li>
                                </ul>
                            </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </header>
        <!--===== END HEADER AREA ======-->
             
        <!--======= WELCOME AREA =======-->
            <div class="welcome-area">
              <div id="particles-js"></div>
               <div class="welcome-table">
                   <div class="welcome-cell">
                        <div class="container">
                            <div class="row">
                               
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div class="welcome-text text-center">
                                        <h4>我是<span style="color: #44b272">陈建华</span></h4>
                                        <h1>我是<span class="theme-color">前端工程师</span></h1>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#about" class="scroll-btn banner-icon theme-color"><i class="fa fa-angle-double-down"></i></a>
            </div>
            <!--===== END WELCOME AREA =====-->
            
        </div>
        <!--=====***************** END INTRO SECTION ***********************=====-->
        
        
        <!--=====************** ABOUT SECTION ***************=====-->
        <section id="about" class="about-section section-padding">
            <div class="container">
                <div class="row">
                   
                    <div class="col-md-4">
                       <div class="author-image wow fadeInLeft" data-wow-delay="0.4s">
                            <img src="images/this_is_me.jpg" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/images/author.jpg" alt="Author Image"> <!--=== author image ===-->
                        
                            <!-- <div class="social-icon theme-color"> 
                                <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                                <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                                <a href="#" target="_blank"><i class="fa fa-google-plus"></i></a>
                                <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
                                <a href="#" target="_blank"><i class="fa fa-pinterest"></i></a>
                                <a href="#" target="_blank"><i class="fa fa-youtube-play"></i></a>
                            </div> -->
                        </div>
                    </div>
                    
                    <div class="col-md-8">
                       <div class="about-text wow fadeInRight" data-wow-delay="0.4s">
						    <h3>你好，幸会</h3>
                            <p style="color: #44b272">这是我，请你用微信扫一扫</p>
                            <img src="images/wx.jpg" style="width: 300px; margin: 10px 30px 20px 0;"><br>
                            <a class="scroll-btn btn extra" href="#portfolio">看我的作品</a>
						</div>
                    </div>
                </div>
                
            </div>
        </section>
        <!--=====*********** END ABOUT SECTION **************=====-->
        
        
        <!--======**************** SERVICES SECTION ******************=======-->
        <section id="services" class="services-section section-padding">
            <div class="container">
               <div class="row">
                <div class="col-md-12">
                    <div class="section-title">
                        <h2><span class="theme-color">我的</span> 相关技术</h2>
                    </div>
                </div>
            </div>
                <div class="row">
                    
                    
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="single-services text-center wow fadeInUp" data-wow-delay="0.2s">
                            <div class="servise-icon">
                                <i class="fa fa-pencil-square"></i>
                            </div>
                            <h4>后端</h4>
                            <p>PHP、ThinkPHP、Laravel、Smarty、MySQL、PDO</p>
                        </div>
                    </div>
                    
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="single-services text-center wow fadeInUp" data-wow-delay="0.4s">
                            <div class="servise-icon">
                                <i class="fa fa-codepen"></i>
                            </div>
                            <h4>移动端</h4>
                            <p>Vue、Bootstrap、微信小程序</p>
                        </div>
                    </div>
                    
                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="single-services last-service text-center wow fadeInUp" data-wow-delay="0.6s">
                            <div class="servise-icon">
                                <i class="fa fa-laptop"></i>
                            </div>
                            <h4>前端</h4>
                            <p>HTML5、CSS3、JavaScript、Sass</p>
                        </div>
                    </div>
                    
                </div>
            </div>
        </section>
        <!--======*************** END SERVICES SECTION ****************=======-->
        
        
        <!--QUOTES AREA-->
        <div id="quotes" class="quotes-area section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="quotes-content text-center">
                           <h3>Let's work together!</h3>
                            <p>编号9527，正在待命</p>
                            <a class="scroll-btn btn theme-color" href="#contact">联系我</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--END QUOTES AREA-->
        
        
        <!--======********** PORTFOLIO SECTION *********======-->
        <section id="portfolio" class="section-padding">
        <div class="container">
            <div class="row">
                    <div class="col-md-12">
                        <div class="section-title">
                            <h2><span class="theme-color">My recent work</span> 作品</h2>
                        </div>
                    </div>
                </div>

            <div class="row">
                <div class="col-md-4 col-sm-6 single-work">
                    <a href="https://github.com/chen940713/wx_music" target="_blank">
                    <img src="images/wx_pro.jpg" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/images/portfolio/item1.jpg" alt="">
                    <div class="itemHover">
                        <div class="work-table">
                            <div class="table-cell">
                                <div class="hover-content">
                                    <i class="fa fa-camera"></i>
                                    <h6>微信小程序-听个响</h6>
                                    <h6>（查看源码）</h6>
                                </div>
                            </div>
                        </div>
                      </div>
                    </a>
                </div>   

                <div class="col-md-4 col-sm-6 single-work">
                    <a href="./productions/douban/index.html" target="_blank">
                        <img src="images/douban_cover.jpg" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/images/portfolio/item2.jpg" alt="">
                            <div class="itemHover">
                            <div class="work-table">
                                <div class="table-cell">
                                    <div class="hover-content">
                                        <i class="fa fa-camera"></i>
                                        <h6>豆瓣图书App</h6>
                                    </div>
                                </div>
                            </div>
                          </div>
                    </a>
                </div>  

                <div class="col-md-4 col-sm-6 single-work">
                    <a href="https://github.com/chen940713/myblog" target="_blank">
                        <img src="images/blog_index.png" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/images/portfolio/item3.jpg" alt="">
                       <div class="itemHover">
                            <div class="work-table">
                                <div class="table-cell">
                                    <div class="hover-content">
                                        <i class="fa fa-camera"></i>
                                        <h6>个人博客</h6>
                                        <h6>（查看源码）</h6>
                                    </div>
                                </div>
                            </div>
                          </div>
                    </a>
                </div>  

                <div class="col-md-4 col-sm-6 single-work">
                    <a href="https://github.com/chen940713/myshop" target="_blank">
                        <img src="images/shop_cover.png" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/images/portfolio/item4.jpg" alt="">
                        <div class="itemHover">
                            <div class="work-table">
                                <div class="table-cell">
                                    <div class="hover-content">
                                        <i class="fa fa-camera"></i>
                                        <h6>商城后台</h6>
                                        <h6>（查看源码）</h6>
                                    </div>
                                </div>
                            </div>
                          </div>
                    </a>
                </div>  
                
                <div class="col-md-4 col-sm-6 single-work">
                    <a href="./productions/oa/index.html" target="_blank">
                        <img src="images/oa_cover.png" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/images/portfolio/item5.jpg" alt="">
                        <div class="itemHover">
                            <div class="work-table">
                                <div class="table-cell">
                                    <div class="hover-content">
                                        <i class="fa fa-camera"></i>
                                        <h6>OA系统</h6>
                                    </div>
                                </div>
                            </div>
                          </div>
                    </a>
                </div>  

                <div class="col-md-4 col-sm-6 single-work">
                    <a href="./productions/canvas/snake/canvas_snake.html" target="_blank">
                        <img src="images/snake_cover.PNG" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/images/portfolio/item6.jpg" alt="">
                        <div class="itemHover">
                            <div class="work-table">
                                <div class="table-cell">
                                    <div class="hover-content">
                                        <i class="fa fa-camera"></i>
                                        <h6>Canvas贪吃蛇游戏</h6>
                                    </div>
                                </div>
                            </div>
                          </div>
                    </a>
                </div>  
   
            </div><!--/.row-->
        </div><!--/.container-->
    </section>
    <!--======************ END PORTFOLIO SECTION **************======-->
    
     
      <!--======**************** REVIEW SECTION *****************========-->
        <div id="review" class="review-section section-padding">
            <div class="container">
               <div class="row">
                    <div class="col-md-12">
                        <div class="section-title">
                            <h2>个人评价</h2>
                        </div>
                    </div>
                </div>
                <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                         <div class="review-full-area">
                           <div class="review-list">
                            
                            <div class="single-review"> <!-- start single carousel item -->
                                <div class="review-content">
                                    <p>敬业、诚信、友善</p>
                                </div>
                                <h5 class="author"> --我</h5>
                            </div> <!-- end start single carousel item -->
                            <div class="single-review"> <!-- start single carousel item -->
                                <div class="review-content">
                                    <p>勤奋认真，做事热情积极，较强的责任心。环境适应能力强，能够很快适应新的工作环境。具备团队合作意识，能够虚心接受他人的意见与建议。</p>
                                </div>
                                <h5 class="author"> --我</h5>
                            </div> <!-- end start single carousel item -->
                        </div>
                            </div>
                    </div>
                    
                </div>
            </div>
        </div>
        <!--======************* END REVIEW SECTION ***************========-->
        
        
        <!--======******************** CONTACT INFO SECTION **********************======-->
          <section id="contact" class="contact-area section-padding">
        <div class="container">
           <div class="row">
                    <div class="col-md-12">
                        <div class="section-title">
                            <h2><span class="theme-color">Get in tuch with me</span> 联系我</h2>
                        </div>
                    </div>
                </div>
            <div class="row">
                <div class="col-md-12 wow fadeInUp" data-wow-delay="0.4s">
                  <!-- Start Contact Form -->
                    <!-- <form id="contactForm" class="contact-form shake" data-toggle="validator">
                     <div class="row">
                         <div class="col-md-6">
                              <div class="form-group">
                        <div class="controls">
                          <input type="text" id="name" class="form-control" placeholder="Name" required data-error="Please enter your name">
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                         </div>
                         <div class="col-md-6">
                             <div class="form-group">
                        <div class="controls">
                          <input type="email" class="email form-control" id="email" placeholder="Email" required data-error="Please enter your email">
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                         </div>
                     </div>
                     
                     <div class="row">
                         <div class="col-md-12">
                             <div class="form-group">
                        <div class="controls">
                          <input type="text" id="msg_subject" class="form-control" placeholder="Subject" required data-error="Please enter your message subject">
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                         </div>
                     </div>
                     
                     <div class="row">
                         <div class="col-md-12">
                             <div class="form-group">
                        <div class="controls">
                          <textarea id="message" rows="7" placeholder="Message" class="form-control" required data-error="Write your message"></textarea>
                          <div class="help-block with-errors"></div>
                        </div>  
                      </div>
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-md-12">
                             <button type="submit" id="submit" class="btn btn-effect theme-color"><i class="fa fa-check"></i> Send</button>
                         </div>
                     </div>
                     
                    <div class="row">
                        <div class="col-md-12">
                            <div id="msgSubmit" class="h3 text-center hidden"></div> 
                      <div class="clearfix"></div>   
                        </div>
                    </div>
                      

                    </form> -->     
                    <!-- End Contact Form -->
                    <div class="row">
                        <div class="col-xs-12" style="text-align: center;">
                            <h3>陈建华</h3>
                            <h3>17625397047</h3>
                            <img src="images/wx.jpg" style="width: 300px;">
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </section>
     <!--======**************** END CONTACT INFO SECTION ********************======-->
        
        
        <!--======******************* FOOTER SECTION ******************======-->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                        <div class="footer-text wow fadeInUp" data-wow-delay="0.4s">
                            <p>&copy; 2018 <strong>Watson Chan</strong> | All RightReserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!--======******************* END FOOTER SECTION ***************======-->
        
        
        <!--==== plugins js ====-->
        <script src="js/plugins.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/plugins.js"></script>
        <!--==== magnific-popup-options js ====-->
        <script src="js/magnific-popup-options.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/magnific-popup-options.js"></script>
        <!--==== validator js ====-->
        <script src="js/validator.min.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/validator.min.js"></script>
        <!--==== particles js ====-->
        <script src="js/particles.min.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/particles.min.js"></script>
        <!--==== app js ====-->
        <script src="js/app.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/app.js"></script>
        <!--==== app js ====-->
        <script src="js/wow-1.3.0.min.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/wow-1.3.0.min.js"></script>
        <!--==== main js ====-->
        <script src="js/main.js" tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88%2D/2017/5/24/9badccbd1734b9942c001cce9eaa4eb7/js/main.js"></script>
    </body>
</html>
